<template>
  <div>
    <h3 v-text="listData.title"></h3>
    <a-table size="small" 
      :columns="listData.columns" 
      :dataSource="records" 
      :rowKey="record => record.id" 
      :rowSelection="{selectedRowKeys: selectedKeys, onChange: onSelectChange, columnWidth: '8%'}" 
      :pagination="false" 
      :loading="loading" 
      :scroll="{y: 'calc(100vh - 345px)'}"></a-table>
    <a-pagination size="small" 
      class="mt-2 pull-right" 
      v-model="pager.current"
      :total="pager.total"
      :pageSize.sync="pager.size"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="handlePagerChange"></a-pagination>
  </div>
</template>

<script>
export default {
  name: 'IList',
  props: {
    listData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      records: [],
      pager: {
        current: 1,
        total: 1,
        size: 10
      },
      loading: false,
      selectedKeys: []
    }
  },
  created() {
    let i = 0;
    while (i < this.pager.size) {
      this.records.push({id: i, name: '猛禽' + i + '号'});
      i++;
    }
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.loading = false;
    },
    onSelectChange(keys) {
      this.selectedKeys = keys;
    },
    handlePagerChange(page, pageSize) {
      this.pager.current = page;
      this.pager.size = pageSize;
      this.fetchData();
    }
  }
}
</script>

<style scoped>

</style>